//饼图
var data1st=[
	{value:62, name:'涉军类'},
	{value:40, name:'涉考类'},
  {value:91, name:'涉政类'},
  {value:35, name:'涉赌类'},
  {value:290, name:'色情类'}
]

var data2nd=[
	{value:334, name:'扫黄打非办'},
  {value:20, name:'财政部'},
  {value:20, name:'教育部'},
  {value:64, name:'部网安局'},
  {value:18, name:'中宣部'},
  {value:62, name:'军委'}
]

var data3th=[
	{value:122, name:'涉政类'},
  {value:27, name:'谣言类'},
  {value:80, name:'色情类'},
  {value:195, name:'涉考类'}
]

var data4th=[
	{value:124, name:'扫黄打非办'},
  {value:18, name:'中宣部'},
  {value:153, name:'教育部'},
  {value:60, name:'网信办'},
  {value:27, name:'部网安局'},
  {value:20, name:'财政部'},
  {value:22, name:'卫计委'}
]

function dataLegend(data){
	var dataLe=[];
	for(var i=0;i<data.length;i++){
		dataLe.push(data[i].name)
	}
	return dataLe
}
var pieOpt = function(){
  return {
  	color : ["#09a7e2","#b8ff2e","#09e24b","#09e2cb","#fce24f","#f46a17","#d40d03"],
	  tooltip : {
	      trigger: 'item',
	      formatter: "{a} <br/>{b} : {c} ({d}%)"
	  },
	  legend: {
          show:false,
//	      orient: 'vertical',
	      left: 'left',
	      bottom: 'bottom',
	      textStyle :{
	      	color: '#fff'
	      }
	  },
	  series : [
      {
        name: '',
        type: 'pie',
        radius : ['35%','50%'],
        center: ['50%', '45%'],
        data:[],
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
      }
	  ]
  }
};

var pie1Chart = echarts.init(document.getElementById('ecPieLeft'));
var pie1st=pieOpt();
pie1st.series[0].data=data1st;
pie1st.legend.data=dataLegend(data1st)
pie1Chart.setOption(pie1st,true);

/*var pie2nd=pieOpt();
pie2nd.legend.data=dataLegend(data2nd);
pie2nd.series[0].data=data2nd;
var pie2Chart = echarts.init(document.getElementById('ecPie2nd'));
pie2Chart.setOption(pie2nd);*/

var pie3Chart = echarts.init(document.getElementById('ecPieRight'));
var pie3th=pieOpt();
pie3th.legend.data=dataLegend(data3th);
pie3th.series[0].data=data3th;
pie3Chart.setOption(pie3th,true);

/*var pie4th=pieOpt();
pie4th.legend.data=dataLegend(data4th);
pie4th.series[0].data=data4th;
var pie4Chart = echarts.init(document.getElementById('ecPie4th'));
pie4Chart.setOption(pie4th);*/

pieClick($(".pieLeft li"),pie1Chart,pie1st,data1st,data2nd)
pieClick($(".pieRight li"),pie3Chart,pie3th,data3th,data4th)
function pieClick(obj,ecObj,ecOption,data1,data2){
	var n=0;
	obj.click(function(){
		n=$(this).index();
		$(this).addClass('active').siblings().removeClass('active')
		if(n==0){
			ecOption.series[0].data=data1;
			ecOption.legend.data=dataLegend(data1)
			ecObj.setOption(ecOption,true);
		}else{
			ecOption.legend.data=dataLegend(data2);
			ecOption.series[0].data=data2;
			ecObj.setOption(ecOption,true);
		}
	})
}

window.addEventListener("resize", function () {
    pie1Chart.resize();
    pie3Chart.resize();
}); 

//时间轴
var timeBg=[
	'url(static/img/timeLine/timeLine1.png)',
	'url(static/img/timeLine/timeLine2.png)',
	'url(static/img/timeLine/timeLine3.png)',
	'url(static/img/timeLine/timeLine4.png)',
	'url(static/img/timeLine/timeLine5.png)'
]
var timeData=[
	{
		year:'',
		title:'',
		content:''
	},{
		year:'2017.03',
		title:'两会保障',
		content:'<div>成功处置境内违法网页：70个</div>'+ 
		        '<div>拦截用户访问：14万余次</div>'
},{
	year:'2017.05',
	title:'“一带一路”峰会保障',
	content:'<div>处置违法违规网页：99个</div>'+
    		'<div>拦截访问：457万余次</div>'+
    		'<div>处置特情：2起</div>'
},{
	year:'2017.06',
	title:'高考保障',
	content:'<div>处置涉及违规发布试题：36个</div>'+
		     '<div>传播考试谣言的境内网页超过：200万次'+
		     '<div>累计拦截访问超过：200万次<div>'
},{
	year:'2017.10',
	title:'“十九大”保障',
	content:'<div>监测各类不良信息、热点舆情，累计监测上报疑似违规网页40多个</div>'+
		     '<div>处置不良网站/网页45个，累计拦截访问115万余次'
},{
	year:'2018.03',
	title:'两会保障',
	content:'<div>有害信息的网页2个，累计拦截访问3千余次，处置用时均在5分钟以内</div>'+ 
	        '<div>累计监测网站/网页5万余个，报送舆情报告2期</div>'+
	        '<div>监测发现并上报各类不良信息2千余个</div>'
},{
	year:'',
	title:'',
	content:''
}]
//console.log(123)

//$(".timeLeft ul").width()
var liHtml=''
var liCon=''
var liConEv=''
liConFirLas=''
for(var i=0;i<timeData.length;i++){
	liConLast='<li>'+
						'<div class="timeBg" style="height:16px;width:59px;background:url(static/img/timeLine/lineLast.png);margin-top: -5px;"></div>'+
//						'<div class="yearTitleCir"></div>'+
					'</li>'
	liConFirst='<li>'+
		'<div class="timeBg" style="height:16px;width:54px;background:url(static/img/timeLine/lineFirst.png);margin-top: -5px;"></div>'+
		'<div class="yearTitleCir"></div>'+
	'</li>'
	liCon='<li>'+
						'<div class="timeYear" style="bottom:180px;line-height:24px">'+timeData[i].year+'</div>'+
						'<div class="timeBg"></div>'+
						'<div class="timeTitle" style="top:143px">'+timeData[i].title+'</div>'+
						'<div class="yearTitleLine"></div>'+
						'<div class="yearTitleCir"></div>'+
					'</li>'
	liConEv='<li>'+
						'<div class="timeTitle" style="bottom:180px;">'+timeData[i].title+'</div>'+
						'<div class="timeBg"></div>'+
						'<div class="timeYear" style="top:143px;line-height:24px">'+timeData[i].year+'</div>'+
						'<div class="yearTitleLine"></div>'+
						'<div class="yearTitleCir"></div>'+
					'</li>'
	if(i==0){
		liHtmls=liConFirst
	}else if(i==timeData.length-1){
		liHtmls=liConLast
	}else{
		if(i%2==0){
			liHtmls=liCon
		}else{
			liHtmls=liConEv
		}
	}
	liHtml+=liHtmls;
//	console.log($(".timeBg"))
}
//console.log(liHtml)
$(".timeLeft ul").append(liHtml)
//console.log($(".timeBg").eq(1).css())
/*for(var i=0;i<timeBg.length;i++){
	if(i>4){
		console.log(i)
	}
	$(".timeBg").eq(i).css('background',timeBg[i])
}*/
for(var i=0;i<timeData.length;i++){
	if(i>0&&i<timeData.length-1){
		$(".timeBg").eq(i).css({
		background:timeBg[i%timeBg.length],
//		left:-6*i
		})
	}
	/*$(".yearTitleLine").eq(i).css({
		'margin-left':-6*i
	})
	$(".timeTitle").eq(i).css({
		'margin-left':-6*i+4
	})
	$(".yearTitleCir").eq(i).css({
		'margin-left':-6*i+4
	})
	$(".timeTitle").eq(i).css({
		'left':-4*i
	})*/
}

	$(".timeLineBoxBig").width(105*(timeData.length-2)+59+54)


var n=0;
var tipHtml=''
console.log(timeData.length)
$(".timeBg").mouseover(function(){
	n=$(this).parent("li").index();
	tipHtml='<li>'+timeData[n].content+'</li>';
	if(n>0&&n<timeData.length-1){
		$(".tipBox").append(tipHtml);
	}
	var pageX=0,pageY=0;
	$(".timeLineBoxBig .timeBg").mousemove(function(ev){
		pageX=ev.clientX;
		pageY=ev.clientY-30
		$(".tipBox").css({
			top:pageY,
			left:pageX
		})
	})
});


$(".timeBg").mouseout(function(){
  $(".tipBox").empty();
  $(".tipBox li").css('padidng',0)
});




